<template>
  <el-dialog
    :title="$t('form.data.dataRecycle')"
    v-model="visible"
    width="80%"
    :before-close="handleClose"
  >
    <el-button
      size="default"
      icon="ele-Plus"
      type="primary"
      @click="handleRestore"
    >
      {{ $t("form.formData.restore") }}
    </el-button>
    <el-button
      size="default"
      icon="ele-Remove"
      type="danger"
      @click="handleDeleteForever"
    >
      {{ $t("form.formData.deleteForever") }}
    </el-button>
    <base-table
      ref="dataRecycleTableRef"
      :grid-options="gridOptions"
    >
      <template #toolbar></template>
      <template #tools></template>
    </base-table>
  </el-dialog>
</template>
<script setup lang="ts">
import BaseTable from "@/views/form/data/table/BaseTable.vue";
import { ref } from "vue";
import { deleteFormDataRequest, listFormRecycleDataTableRequest, updateFormDataDeletedRequest } from "@/api/project/data";
import { MessageBoxUtil, MessageUtil } from "@/utils/messageUtil";
import { i18n } from "@/i18n";

const props = defineProps({
  columns: {
    type: Array,
    default: () => []
  },
  formKey: {
    type: String,
    default: ""
  }
});

const visible = ref(false);

const queryParams = ref({
  formKey: "",
  size: 10,
  current: 1
});

const emits = defineEmits(["refresh"]);

const handleClose = () => {
  visible.value = false;
  emits("refresh");
};

const gridOptions = ref<any>({
  border: true,
  stripe: true,
  resizable: true,
  showHeaderOverflow: true,
  showOverflow: true,
  highlightHoverRow: true,
  keepSource: true,
  id: "dataRecycleGrid",
  rowId: "id",
  rowConfig: {
    keyField: "id",
    isHover: true
  },
  customConfig: {
    storage: false
  },
  printConfig: {},
  menuConfig: {
    body: {
      options: []
    }
  },
  sortConfig: {
    trigger: "cell",
    remote: true
  },
  filterConfig: {
    remote: true
  },
  pagerConfig: {
    pageSize: 10,
    pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000]
  },
  toolbarConfig: {
    refresh: false,
    import: false,
    export: false,
    print: false,
    zoom: false,
    custom: false,
    slots: {
      buttons: "toolbar_buttons",
      tools: "toolbar_tools"
    }
  },
  proxyConfig: {
    seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
    sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
    filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
    // 对应响应结果 { result: [], page: { total: 100 } }
    props: {
      result: "data.records", // 配置响应结果列表字段
      total: "data.total" // 配置响应结果总页数字段
    },
    ajax: {
      // 接收 Promise 对象
      query: ({ page, sorts, filters, form }) => {
        queryParams.value.size = page.pageSize;
        queryParams.value.current = page.currentPage - 1;
        queryParams.value.formKey = props.formKey;
        return listFormRecycleDataTableRequest(queryParams.value);
      }
    }
  },
  columns: [],
  importConfig: {
    // remote: true,
    // importMethod: this.importMethod,
    types: ["csv", "html", "xml", "txt"],
    modes: ["insert"]
  },
  // 废弃 重写导出了
  exportConfig: {
    // remote: true,
    isMerge: false,
    isAllExpand: false,
    remote: true,
    types: ["xlsx", "csv"],
    modes: ["current", "selected", "all"]
  },
  checkboxConfig: {
    // labelField: 'id',
    reserve: true,
    highlight: true,
    range: true
  }
});

const open = () => {
  visible.value = true;
  gridOptions.value!.columns = props.columns;
};

const dataRecycleTableRef = ref<any>(null);

// 恢复数据
const handleRestore = () => {
  let ids = dataRecycleTableRef.value
    .getXGrid()
    .getCheckboxRecords(true)
    .map((item: any) => item.id);
  if (!ids.length) {
    MessageUtil.warning(i18n.global.t("form.formData.selectData"));
    return;
  }
  MessageBoxUtil.confirm(
    `${i18n.global.t("form.formData.restoreConfirmation")}${ids.length}${i18n.global.t("form.formData.deleteConfirmationCount")}`,
    () => {
      updateFormDataDeletedRequest(props.formKey, ids, false).then(() => {
        MessageUtil.success(i18n.global.t("formI18n.all.success"));
        handleReloadTable();
      });
    }
  );
};

const handleDeleteForever = () => {
  let ids = dataRecycleTableRef.value
    .getXGrid()
    .getCheckboxRecords(true)
    .map((item: any) => item.id);
  if (!ids.length) {
    MessageUtil.warning(i18n.global.t("form.formData.selectData"));
    return;
  }
  MessageBoxUtil.confirm(
    `${i18n.global.t("form.formData.deleteForeverConfirmation")}${ids.length}${i18n.global.t(
      "form.formData.deleteConfirmationCount"
    )}`,
    () => {
      deleteFormDataRequest(ids, props.formKey).then(() => {
        MessageUtil.success(i18n.global.t("formI18n.all.success"));
        handleReloadTable();
      });
    }
  );
};

const handleReloadTable = () => {
  dataRecycleTableRef.value.getXGrid().commitProxy("query");
};

defineExpose({
  open
});
</script>

<style scoped lang="scss"></style>
